<template>
<div>
  <el-breadcrumb>
    <el-breadcrumb-item>首页</el-breadcrumb-item>
    <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
  </el-breadcrumb>
  <div class="content search_form">
      <e-heading>{{title}}</e-heading>
      <el-form v-bind="getFormProps()" :inline="true">
        <el-form-item label="课程教练：">
          <el-select size="small" v-model="form.coach" clearable value-key="id" placeholder="请选择教练" style="width: 100%;">
            <el-option v-for="item in train_teacher_list" :key="item.id" :label="item.teacherName" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="省市：">
          <el-select size="small" v-model="address" clearable placeholder="请选择省市" style="width: 100%;">
            <el-option
              v-if='train_compus_selection'
              v-for="(item, index) in provinceAreaOptions"
              :key="index"
              :label="item.text"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="" label-width="0">
          <el-input style="width:220px" size="small" v-model="form.keyword" placeholder="请输入课程名称"></el-input>
        </el-form-item>
        <el-button size="small" type="primary-plain" native-type="submit">搜索</el-button>
        <br/>
        <el-form-item label="课程性质：">
          <el-checkbox-group v-model="form.classNature">
            <el-checkbox label="0">专业课</el-checkbox>
            <el-checkbox label="1">综合课</el-checkbox>
            <el-checkbox label="2">次课</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="课程状态：">
          <el-checkbox-group v-model="form.classState">
            <el-checkbox label="5">进行中</el-checkbox>
            <el-checkbox label="4">已下架</el-checkbox>
            <el-checkbox label="1">审核中</el-checkbox>
            <el-checkbox label="2">审核不通过</el-checkbox>
            <!-- <el-checkbox label="3" name="type">审核通过</el-checkbox> -->
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <!--tableList-->
      <div class="table_list">
        <div class="total_tip">当前结果: 共计<span class="total_color">{{train_currilum_list.listInfo && train_currilum_list.listInfo.total}}</span>个课程 | <span class="total_color">{{train_currilum_list.infoVo && train_currilum_list.infoVo.lsClassCount}}</span>个课程在开班</div>
        <el-table
          :data="train_currilum_list.listInfo && train_currilum_list.listInfo.list"
          empty-text="暂无课程"
          v-bind="getTableProps()"
          @sort-change="handelOrder">
          <el-table-column
            label="课程名称"
            :show-overflow-tooltip="true"
            >
            <template slot-scope="scope">
              <router-link :to="{name: 'detail', params: {serviceId: scope.row.goodsCode}}" target="_blank" class="link class_name">
                <span :class="['state_sred','state_green','state_warn'][scope.row.properties]"></span>
                {{ scope.row.courseName }}
              </router-link>
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            align="center"
            label="开课校区数"
            width="90">
            <template slot-scope="scope">
              {{scope.row.startCampusCount ? scope.row.startCampusCount : '0'}}
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            align="center"
            label="目前开班数"
            width="90">
            <template slot-scope="scope">
              {{scope.row.startClassCount ? scope.row.startClassCount : '0'}}
            </template>
          </el-table-column>
          <!-- <el-table-column
            label="所在省市"
            align="center"
            :show-overflow-tooltip="true"
            width="100">
            <template slot-scope="scope">
              <span>{{addressListFormat(scope.row.addressList)}}</span>
            </template>
          </el-table-column> -->
          <el-table-column
            :show-overflow-tooltip="true"
            align="center"
            label="教练"
            width="160">
            <template slot-scope="scope">
              {{scope.row.teacherName ? scope.row.teacherName : '-'}}
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            sortable
            label="发布时间"
            prop="publishTime"
            align="center"
            width="100">
            <template slot-scope="scope">{{scope.row.publishTime | FormatDate('yyyy-MM-dd')}}</template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            label="课程状态"
            align="center"
            width="110">
            <template slot-scope="scope">
              <span class="cstate_text">
                <span v-if="scope.row.auditStatus == 0" class="cstate1"></span>
                <span v-if="scope.row.auditStatus == 1" class="cstate2"></span>
                <span v-if="scope.row.auditStatus == 2" class="cstate3"></span>
                <!-- <span v-if="scope.row.auditStatus == 3">审核通过</span> -->
                <span v-if="scope.row.auditStatus == 4" class="cstate4"></span>
                <span v-if="scope.row.auditStatus == 5" class="cstate5"></span>
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="74">
            <template slot-scope="scope">
              <!-- v2.4.0 添加审核未通过的课程不显示详情按钮 -->
              <!-- v2.6.1去除教案模板 和 学员报名 -->
              <p><el-button v-if="scope.row.auditStatus != 2" @click="handleShow(scope.row.courseId, scope.row.auditStatus, scope.row.properties)" type="link">详情</el-button></p>
              <!-- <p><el-button @click="handleSetTem(scope.row.courseId)"  v-if="scope.row.properties != 2" type="link">教案模板</el-button></p> -->
              <p><el-button @click="handleCreateClass(scope.row.courseId, scope.row.courseName, scope.row.properties)" type="link" v-if="(scope.row.auditStatus == 4 || scope.row.auditStatus == 5) && scope.row.properties != 2">新增班级</el-button></p>
              <!-- <p><el-button type="link" v-if="scope.row.auditStatus == 4 || scope.row.auditStatus == 5" @click="handleSignStudent(scope.row.courseId, scope.row.courseName, scope.row.properties)">学员报名</el-button></p> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <el-pagination
        v-bind="getPaginationProps(train_currilum_list.listInfo)"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange">
      </el-pagination>
  </div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { pagingList } from 'utils/mixins'
export default {
  mixins: [pagingList],
  computed: {
    ...mapGetters({
      train_currilum_list: 'train_currilum_list',
      train_teacher_list: 'train_teacher_list',
      train_compus_selection: 'train_compus_selection'
    }),
    provinceAreaOptions () {
      if (this.train_compus_selection && this.train_compus_selection.length > 0) {
        let arr = this.train_compus_selection
        let result = []
        for (let item of arr) {
          let mid = {
            id: `${item.provinceId}${item.cityId}`,
            value: [item.provinceId, item.cityId],
            text: `${item.provinceName}-${item.cityName}`
          }
          result.push(mid)
        }
        return result
      }
    },
    address: {
      get () {
        if (this.query.provinceIdStr) {
          return `${this.query.provinceIdStr}${this.query.cityIdStr}`
        } else {
          this.query.provinceIdStr = ''
          this.query.cityIdStr = ''
          return ''
        }
      },
      set (newVal) {
        if (newVal) {
          for (let item of this.provinceAreaOptions) {
            let itemId = item.id
            if (itemId === newVal) {
              this.query.provinceIdStr = item.value[0]
              this.query.cityIdStr = item.value[1]
            }
          }
        } else {
          this.query.provinceIdStr = ''
          this.query.cityIdStr = ''
        }
      }
    }
  },
  watch: {
    'form.coach' (value) {
      this.query.teacherId = value.id
      this.query.teacherName = value.teacherName
    },
    'form.keyword' (value) {
      this.query.name = value
    },
    'form.classNature' (value) {
      this.query.courseNature = value.join()
    },
    'form.classState' (value) {
      this.query.courseStatus = value.join()
    },
    '$route': function () {
      if (JSON.stringify(this.$route.query) === '{}') {
        this.form.coach = {}
        this.form.keyword = ''
        this.form.classNature = []
        this.form.classState = []
      }
    }
  },
  created () {
    this.form.coach = {
      id: this.query.teacherId ? Number(this.query.teacherId) : '',
      teacherName: this.query.teacherName ? this.query.teacherName : ''
    }
    this.form.keyword = this.query.name
    this.form.classNature = this.query.courseNature ? this.query.courseNature.split(',') : []
    this.form.classState = this.query.courseStatus ? this.query.courseStatus.split(',') : []
    this.$store.dispatch('train_teacher_list')
  },
  mounted () {
    this.$store.dispatch('train_compus_selection')
  },
  data () {
    return {
      title: '课程列表',
      query: this.getQuery({provinceIdStr: this.$route.query.provinceIdStr || null, cityIdStr: this.$route.query.cityIdStr || null}),
      form: {
        keyword: '',
        coach: '',
        classNature: [],
        classState: []
      }
    }
  },
  methods: {
    addressListFormat (addressList) {
      if ((addressList instanceof Array) && addressList.length) {
        let res = ''
        let mid = []
        for (let i = 0; i < addressList.length; i++) {
          let item = addressList[i]
          let itemMid = `${item.provinceId}-${item.cityId}`
          if (mid.indexOf(itemMid) === -1) {
            mid.push(itemMid)
            if (i === 0) {
              res += `${item.provinceName}-${item.cityName}`
            } else {
              res += `、${item.provinceName}-${item.cityName}`
            }
          }
        }
        return res
      }
    },
    fetch (query) {
      this.$store.dispatch('train_currilum_list', query)
    },
    handleCreateClass (id, name, courseType) { // 课程分班
      this.$router.push({
        path: '/training/class/add',
        query: {
          'isonly': 'yes',
          'thisid': id,
          'name': name,
          'courseType': courseType
        }
      })
    },
    handleShow (id, state, classType) { // 查看详情
      this.$router.push({path: '/training/curriculum/detail', query: {'id': id, 'state': state, 'classtype': classType}})
    },
    handelOrder (column) { // 排序
      let orderStr = ''
      if (column.order === 'ascending') {
        orderStr = 'asc'
      } else if (column.order === 'descending') {
        orderStr = 'desc'
      } else {
        orderStr = ''
      }
      this.query.sort = column.prop === 'publishTime' ? 'publish_time' : ''
      this.query.order = orderStr
      this.fetch(this.query)
    },
    handleSignStudent (id, name, type) { // 课程学员报名
      this.$router.push({path: '/training/curriculum/studentSign', query: {id: id, name: name, type: type}})
    },
    handleSetTem (id) { // 设置教案模板
      this.$router.push({path: '/training/curriculum/template', query: {courseId: id}})
    }
  }
}
</script>
<style lang="scss">
 
.table_list{
   .total_color{
    color:#fd6f01;
  }
  .total_tip{
    text-align: center;
    background:#d9e3ee;
    line-height: 32px;
  }
  margin-top:30px;
  .placeholder-text{
    margin-top:30px !important;
  }
  .el-table td{
    height:55px;
  }
  td{
    position: relative;
    .cstate_text{
      .cstate1::after{
        content: '草稿';
      }
      .cstate2::after{
        content: '审核中';
        color:#f29d6f;
      }
      .cstate3::after{
        content: '审核不通过';
        color:#ec3324;
      }
      .cstate4::after{
        content: '已下架';
      }
      .cstate5::after{
        content: '进行中';
        color:#49a57f;
      }
    }
    .statr_red{
      color:#f30;
    }
    .statr_gren{
      color:#979797;
    }
  }
  .el-table{
    .time_text{
      margin:9px 0;
      p{
        line-height:14px;
        height:14px;
      }
    }
    .state_green,
    .state_sred,
    .state_warn{
      display: inline-block;
      margin-top:-8px;
      background:#0ab885;
      color:#fff;
      height:16px;
      width:16px;
      line-height: 16px;
      text-align: center;
      margin-right: 3px;
      &::after{
        content: '综'
      }
    }
    .state_sred{
      background:#ff6465;
      &::after{
        content: '专'
      }
    }
    .state_warn{
      background:rgb(140, 64, 190);
      &::after{
        content: '次'
      }
    }
  }
  .logo{
    width:40px;
    height:30px;
  }
}
</style>
